
<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <div>
       <el-form :inline="true"
               :model="dataForm"
             >
        <!-- <el-form-item>
          <ejs-multiselect  style="width:300px" id='sample-list2' :dataSource='dataForm.remoteFields'
           :placeholder="$t('custom.marketbot.clientUsageReport.selectclients')"></ejs-multiselect>
        </el-form-item>

         -->
        <!-- <el-form-item>
          <ejs-autocomplete  :dataSource='clientData'  item-value="tenantName" :placeholder="$t('custom.marketbot.clientUsageReport.selectclients')" @change="query" v-model="dataForm.clientName" ></ejs-autocomplete>
        </el-form-item> -->
        <el-form-item>
            <ejs-daterangepicker :placeholder="$t('custom.marketbot.clientUsageReport.selectDate')" style="width:200px;"
            :format="dateRangeDefaultSetting.format" v-model="dataForm.searchDate" @change="query" :strictMode="dateRangeDefaultSetting.selectionMode"
            >
            <e-presets>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisWeek')" :start='dateRangeDefaultSetting.weekStartDate' :end='dateRangeDefaultSetting.weekEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisMonth')" :start='dateRangeDefaultSetting.monthStartDate' :end='dateRangeDefaultSetting.monthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastMonth')" :start='dateRangeDefaultSetting.lastMonthStartDate' :end='dateRangeDefaultSetting.lastMonthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastYear')" :start='dateRangeDefaultSetting.lastYearStartDate' :end='dateRangeDefaultSetting.lastYearEndDate'></e-preset>
            </e-presets>
        </ejs-daterangepicker>
        </el-form-item>
      </el-form>
      <div class="control-section">
      <div class="content-wrapper" v-loading="loading">
        <ejs-pivotview
          :dataSourceSettings="pivotTableDefaultSetting.dataSourceSettings"
          :gridSettings="pivotTableDefaultSetting.gridSettings"
          :width="pivotTableDefaultSetting.width"
          :height="pivotTableDefaultSetting.height"
          :allowDrillThrough="pivotTableDefaultSetting.allowDrillThrough"
          :showTooltip="pivotTableDefaultSetting.showTooltip"
          :showFieldList="pivotTableDefaultSetting.showFieldList"
          :hyperlinkSettings="pivotTableDefaultSetting.hyperlinkSettings"
          :hyperlinkCellClick="onCellClick"
          :load="load"
          :allowExcelExport="pivotTableDefaultSetting.allowExcelExport"
          :allowConditionalFormatting="pivotTableDefaultSetting.allowConditionalFormatting"
          :allowNumberFormatting="pivotTableDefaultSetting.allowNumberFormatting"
          :allowPdfExport="pivotTableDefaultSetting.allowPdfExport"
          :showToolbar="pivotTableDefaultSetting.showToolbar"
          :allowCalculatedField="pivotTableDefaultSetting.allowCalculatedField"
          :toolbar="pivotTableDefaultSetting.toolbar"
          :toolbarRender="beforeToolbarRender"
          :displayOption="pivotTableDefaultSetting.displayOption"
          :chartSettings="pivotTableDefaultSetting.chartSettings"
          :enableValueSorting="pivotTableDefaultSetting.enableValueSorting"
          ref="pivotview"
        >
        </ejs-pivotview>
        <newClientDetail  :dialogVisible="newClientdialogVisible" :dataInfo="newClientDetail"></newClientDetail>
        <activeClientDetail :dialogVisible="activeClientdialogVisible" :dataInfo="activeClientDetail"></activeClientDetail>
        <newClientCwDetail :dialogVisible="newClientCwdialogVisible" :dataInfo="newClientCwDetail"></newClientCwDetail>

      </div>
    </div>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/report-view-module'
import newClientDetail from '@/components/score-card-report/NewClientDetail.vue'
import activeClientDetail from '@/components/score-card-report/ActiveClientDetail.vue'
import newClientCwDetail from '@/components/score-card-report/NewClientCwKeyDetail.vue'
import moment from 'moment'

export default {
  mixins: [mixinViewModule],
  components: { newClientDetail, activeClientDetail, newClientCwDetail },
  data () {
    return {
      mixinViewModuleOptions: {
        pageId: 'score-card-report'
      },
      pivotTableDefaultSetting: {
        dataSourceSettings: {
          dataSource: null,
          values: [
            { name: 'newClient', caption: this.$t('custom.marketbot.scorecard.newClient') },
            { name: 'activeClient', caption: this.$t('custom.marketbot.scorecard.activeClient') },
            { name: 'newWithCwKey', caption: this.$t('custom.marketbot.scorecard.newWithCwKey') }
          ],
          formatSettings: [{ name: 'Amount', format: 'C0' }],
          columns: [
          ],
          rows: [{ name: 'date', caption: this.$t('custom.marketbot.scorecard.date') }],
          filters: [

          ]
        },
        height: window.innerHeight - 230
      },
      dataForm: {
        searchDate: null
      },
      newClientdialogVisible: false,
      newClientDetail: null,
      activeClientdialogVisible: false,
      activeClientDetail: null,
      newClientCwdialogVisible: false,
      newClientCwDetail: null
    }
  },

  methods: {
    resetDataForm () {
      this.getClientList()
      this.dataForm.searchDate = [this.dateRangeDefaultSetting.weekStartDate, this.dateRangeDefaultSetting.weekEndDate]
    },
    getClientList () {
      this.$interface.system.getClientList().then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.clientData = res.data
      })
    },
    load (item) {
      this.grid = item
      this.query()
    },
    getDataListAPI () {
      var _self = this
      const params = {
        startDate: '',
        endDate: ''
      }
      // validate dataform before query
      if (_self.dataForm) {
        if (_self.dataForm.searchDate && _self.dataForm.searchDate.length >= 2) {
          params.startDate = moment(_self.dataForm.searchDate[0]).format('YYYY-MM-DD')
          params.endDate = moment(_self.dataForm.searchDate[1]).format('YYYY-MM-DD')
        } else {
          delete params.startDate
          delete params.endDate
        }

        return this.$interface.marktetReport.getScoreCardData(params)
      } else {
        // show error
      }
    },
    onCellClick (item) {
      const params = {
        startDate: '',
        endDate: ''
      }
      // validate dataform before query
      if (this.dataForm) {
        if (this.dataForm.searchDate && this.dataForm.searchDate.length >= 2) {
          params.startDate = moment(this.dataForm.searchDate[0]).format('YYYY-MM-DD')
          params.endDate = moment(this.dataForm.searchDate[1]).format('YYYY-MM-DD')
        } else {
          delete params.startDate
          delete params.endDate
        }
        if (item.data.actualText === 'newClient') {
          this.$interface.marktetReport.findNew(params).then(({ data: res }) => {
            if (res) {
              this.newClientDetail = res.data
              this.newClientdialogVisible = true
              this.activeClientdialogVisible = false
              this.newClientCwdialogVisible = false
              Promise.all(this.dataInfo()).then(res => {
                this.initialize()
              })
            }
          }).catch(() => {})
        }
        if (item.data.actualText === 'activeClient') {
          this.$interface.marktetReport.findActive(params).then(({ data: res }) => {
            if (res) {
              this.activeClientDetail = res.data
              this.activeClientdialogVisible = true
              this.newClientdialogVisible = false
              this.newClientCwdialogVisible = false
              Promise.all(this.dataInfo()).then(res => {
                this.$nextTick(() => {
                  this.initialize()
                })
              })
            }
          }).catch(() => {})
        }
        if (item.data.actualText === 'newWithCwKey') {
          this.$interface.marktetReport.findWithCwKey(params).then(({ data: res }) => {
            if (res) {
              this.newClientCwDetail = res.data
              this.newClientCwdialogVisible = true
              this.activeClientdialogVisible = false
              this.newClientdialogVisible = false
              Promise.all(this.dataInfo()).then(res => {
                this.initialize()
              })
            }
          }).catch(() => {})
        }
      }
    }
  }
}
</script>
<style scoped>
.e-custom-class {
  text-decoration: underline;
}

.e-custom-class:hover {
  color: red;
  text-decoration: none;
}
</style>
